
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta content="fullscreen=yes,preventMove=no" name="ML-Config" />
    <meta http-equiv="content-language" content="zh-CN" />
    <meta name="keywords" content="销售">
    <meta name="description" content="销售冰箱、空调、电视、洗衣机">
    <title>注册</title>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" href="./js/need/layer.css">
    <link rel="stylesheet" href="./css/sign.css">
    <link rel="stylesheet" type="text/css" href="./css/jquery-weui.min.css" />
    <script src='./js/layer.js'></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/address.js?v=11"></script>
    <script src="./js/city-picker.js"></script>
    <script src="./js/fastclick.js"></script>
    <script src="./js/jquery-weui.js"></script>
    <script src="./js/picker.js"></script>
</head>
<body >
<div class="contentBox">
    <ul>
        <li>
            <input id="userName" type="text" placeholder="请输入姓名">
        </li>
        <li>
            <input id="userIdCard" type="text" placeholder="请输入身份证号">
        </li>
        <li class="topMargin">
            <div class="areaBox">
                <img src="./images/rightArrow.png" alt="">
                <input id="userCity" readonly type="text" placeholder="省、市、区">
            </div>
        </li>
        <li class="topMargin">
            <input id="userPassword" type="password" placeholder="请设置6-20位密码">
        </li>
        <li>
            <input id="userPasswordTwo" type="password" placeholder="请再次输入密码">
        </li>
        <li>
            <input id="userPhone" onkeyup="this.value=this.value.replace(/[^0-9-]+/,''); " type="text" placeholder="请输入手机号">
            <div class="verify">获取验证码</div>
        </li>
        <li>
            <input id="userIdentify" type="text" placeholder="请输入验证码">
        </li>
    </ul>
</div>
<div class="signBtn">注册</div>
<div class="blackMask close-picker"></div>
</body>
<script>
    $(function(){
        FastClick.attach(document.body);

        var cityMsg=$('#userCity');
        cityMsg.click(function(){
            $('.blackMask').show();
        });
        cityMsg.cityPicker({
            //showDistrict: false,
            toolbarTemplate:'<div  class="close-Box"><div class="cancel-Btn close-picker">取消</div><div class="finish-btn close-picker">完成</div></div>',
            onClose: function(p, v, d) {
                $('.close-picker').hide();
            }
        });

        //验证码
        if($.cookie("captcha")){
            var count = $.cookie("captcha");
            var btn = $('.verify');
            btn.html(count+'秒后重发').addClass('send');
            var resend = setInterval(function(){
                count--;
                if (count > 0){
                    btn.html(count+'秒后重发').addClass('send');
                    $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
                }else {
                    clearInterval(resend);
                    btn.html("获取验证码").removeClass('send');
                }
            }, 1000);
        }

        $('.verify').click(function(){
            if($(this).hasClass('send')){
                return;
            }
            var tel=$('#userPhone').val();
            if(!isPhoneNo(tel)){
                alert('请输入正确手机号码');
            }else{
                $('.verify').addClass('send');
                var btn = $(this);
                var count = 60;
                btn.html(count+"秒后重发").addClass('send');
                var resend = setInterval(function(){
                    count--;
                    if (count > 0){
                        btn.html(count+"秒后重发").addClass('send');
                        $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
                    }else {
                        clearInterval(resend);
                        btn.html("获取验证码").removeClass('send');
                    }
                }, 1000);
                $.ajax({
                    type: urlType,
                    url: '/login/captcha',
                    data: {
                        mobile : tel,
                        captcha : 'captcha'
                    },
                    dataType: "json",
                    success: function (res) {
                        console.log(res);

                    },
                    error: function () {
                    }
                });

            }
        });

        function isPhoneNo(phone) {
            var pattern = /^1[34578]\d{9}$/;
            return pattern.test(phone);
        }

        $('.signBtn').click(function(){
            var userName=$('#userName').val();
            var userIdCard=$('#userIdCard').val();
            var city = $('#userCity');
            var userCity=city.val();
            var userCityId=city.data('codes');
            var userPassword=$('#userPassword').val();
            var userPasswordTwo=$('#userPasswordTwo').val();
            var userPhone=$('#userPhone').val();
            var userIdentify=$('#userIdentify').val();
            if(!(userName.match(/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/))||!userName){
                layer.open({
                    content: '请输入正确姓名'
                    ,btn: '确认'
                }); return;
            }
            if(userIdCard.length<17){
                layer.open({
                    content: '身份证格式错误'
                    ,btn: '确认'
                }); return;
            }
            if(!userCity){
                layer.open({
                    content: '请选择省市区'
                    ,btn: '确认'
                }); return;
            }
            if(userPassword.length<6||userPassword.length>20){
                layer.open({
                    content: '密码长度错误'
                    ,btn: '确认'
                }); return;
            }
            if(userPassword!=userPasswordTwo){
                layer.open({
                    content: '两次密码不一致'
                    ,btn: '确认'
                });
                $('#userPassword').val('');
                $('#userPasswordTwo').val('');
                return;
            }
            if(!userPhone.match(/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/)){
                layer.open({
                    content: '手机号格式错误'
                    ,btn: '确认'
                });  return;
            }
            if(!userIdentify.match(/\d{6}/)){
                layer.open({
                    content: '验证码格式错误'
                    ,btn: '确认'
                });  return;
            }

            var placeArr=userCity.split(' ');
            var placeIdArr = userCityId.split(',');
            //用户注册
            $.ajax({
                type: urlType,
                url: '/login/register',
                data: {
                    real_name : userName,
                    idcard : userIdCard,
                    province_id : placeIdArr[0],
                    province_name : placeArr[0],
                    city_id : placeIdArr[1],
                    city_name : placeArr[1],
                    password : userPassword,
                    mobile : userPhone,
                    captcha : userIdentify
                },
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if(res.code==200){
                        layer.open({
                            content: '注册成功',
                            btn: '确定',
                            shadeClose: false,
                            yes: function(){
                                window.location.href='/index/login';
                            }
                        });
                    }else{
                        layer.open({
                            content: res.message
                            ,btn: '确定'
                        });
                    }
                },
                error: function () {
                }
            });

        })

    });

</script>




